<template>
    <div class="table-page-container layout-padding">
        <el-card shadow="hover" class="layout-padding-auto">
        <div class="system-user-search mb15">
            <el-form ref="searchFormRef" :model="searchForm" inline>
            <el-form-item label="姓名" prop="name">
                <el-input v-model="searchForm.name" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="mobile">
                <el-input v-model="searchForm.mobile" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="卡号" prop="bank_account">
                <el-input v-model="searchForm.bank_account" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button size="default" type="primary" @click="refresh">
                <el-icon>
                    <ele-Search/>
                </el-icon>
                查询
                </el-button>
                <el-button size="default" @click="onReset">
                <el-icon>
                    <ele-RefreshRight/>
                </el-icon>
                重置
                </el-button>
            </el-form-item>
            </el-form>
            <div class="table-tool-bar">
                <el-button
                size="default"
                type="primary"
                v-if="$can(ButtonPermission.CREATE_DISTRIBUTOR)"
                @click="handleAdd"
                >
                <el-icon>
                    <ele-Plus />
                </el-icon>
                新增渠道商
                </el-button>
             </div>
        </div>
        <el-table
            :data="tableData.list"
            v-loading="loading"
            element-loading-text="加载中"
            border
            style="width: 100%"
        >
            <el-table-column type="index" label="序号" width="60" align="center"/>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="uid" label="UID"></el-table-column>
            <el-table-column prop="bank_name" label="开户行">
              <template #default="{ row }">
                <div>{{ getBankName(row.bank_code) }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="bank_account" label="卡号" width="200"></el-table-column>
            <el-table-column prop="balance" label="可提现余额"></el-table-column>
            <el-table-column prop="unrecorded_amount" label="待入账金额"></el-table-column>
            <el-table-column prop="accumulations" label="累计收益"></el-table-column>
            <el-table-column prop="created_at" label="创建时间" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" width="160">
            <template #default="scope">

                <el-button
                v-if="$can(ButtonPermission.UPDATE_DISTRIBUTOR)"
                size="small"
                text
                type="primary"
                @click="handleEdit(scope.row)"
                >编辑
                </el-button
                >
                <el-button
                v-if="$can(ButtonPermission.DELETE_DISTRIBUTOR)"
                size="small"
                text
                type="primary"
                @click="handleDelete(scope.row)"
                style="color: red"
                >删除
                </el-button
                >
            </template>
            </el-table-column>
        </el-table>
        <CommonPagination :pagination="pagination" :total="tableData.total"></CommonPagination>

        <AddDialog ref="AddDialogRef" @refresh="refresh"/>

        </el-card>

    </div>
</template>

  <script setup lang="ts" name="distributor">
  import { reactive, ref , defineAsyncComponent } from 'vue';
  import { ElMessageBox, ElMessage, FormInstance, rowContextKey } from 'element-plus';
  import { useTable } from '/@/hooks/use-table';
  import CommonPagination from '/@/components/common-pagination/index.vue';
  import { ButtonPermission, DialogType } from '/@/constants';
  import { readAllDsitributor, deleteDistributor } from "/@/api/distributor";
  import { BankList } from '/@/constants/bank';

  const AddDialog = defineAsyncComponent(() => import('./dialog.vue'))

  const searchFormRef = ref<FormInstance>();

  const searchForm = reactive({
    name: undefined,
    mobile: undefined,
    bank_account: undefined
  });

  const AddDialogRef = ref<InstanceType<typeof AddDialog>>();

  const { tableData, loading, pagination, refresh } = useTable<any>(({ page, pageSize }) =>
    readAllDsitributor({ page, pageSize, ...searchForm }).then(({ data }) => {
      return {
        total: data?.total,
        list: data?.list
      };
    })
  );

  const onReset = () => {
    searchFormRef.value?.resetFields();
    refresh();
  };

  const getBankName = (code: string) => {
    return BankList.find(it => it.value == code)?.label;
  }

  const handleAdd = () => {
    AddDialogRef.value?.openDialog(DialogType.CREATE)
  }

  const handleEdit = (row: any) => {
    AddDialogRef.value?.openDialog(DialogType.EDIT, row);
  }

  const handleDelete = (row: any) => {
    ElMessageBox.confirm(`此操作不可恢复，是否继续?`, '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
      buttonSize: 'default',
      beforeClose: async (action, instance, done) => {
        if (action === 'confirm') {
          instance.confirmButtonLoading = true;
          instance.confirmButtonText = '提交中';
          await deleteDistributor(row.id).then(() => {
            ElMessage.success('删除成功');
            refresh();
          });

          instance.confirmButtonLoading = false;
          done();
        } else {
          done();
        }
      }
    });
  };

</script>
